<template>
	<view class="haibao">
		<!-- <view v-for="i in data" :key='i' class="item" @click="tt(i.roomid)">
			{{i.name}}
		<view> -->
		<view class="option" v-for="(item, index) in data" :key="index">
			<view class="option-title">
				<view class="title-left">
					<view class="option-awater"><image src="../static/微信图片_20201126155802.png" mode=""></image></view>
					<view>{{ item.anchor_name }}</view>
				</view>
				<subscribe class="title-right" :width="width" :height="height" :font-size="fontSize" :color="color" :background-color="backgroundColor" @subscribe.stop="onSubscribe" :room-id="item.roomid" v-if="item.live_status==102">开播提醒</subscribe>
				
			</view>
			<view class="option-img" @click="tt(item.roomid)">
				<image :src="item.share_img" mode="widthFix"></image>
				<view class="modal">
					
					<view class="time" v-if="item.live_status==103">
						直播已结束
					</view>
					<view class="time" v-if="item.live_status==102&&item.start_time*1000-time*1000>0">
						直播倒计时
					</view>
					<view class="time" v-if="item.live_status==101||item.live_status==106">
						正在直播中…
					</view>
					<view class="time" v-if="item.live_status==102" style="font-size: 48rpx;padding-top: 20rpx;">
						{{item.start_time*1000-time*1000>0?$dateFormat1(item.start_time*1000-time*1000,'i分'):'直播即将开始'}}
					</view>
					
					<view class="buttom" v-if="item.live_status==101||item.live_status==106">
						<text>立即观看</text>
						<image src="../static/play@2x.png" mode=""></image>
					</view>
				</view>
				</view>
			<view class="option-detail">
				<view class="detail-title">{{ item.name }}</view>
				<view class="detail-data">
					<view class="look">
						<view class="look-icons">
							开播时间{{ $dateFormat(item.start_time*1000,'m月d日 H:i') }}-{{ $dateFormat(item.end_time*1000,'m月d日 H:i') }}
						</view>
					</view>
					<view class="hours" :class="item.live_status==101?'hours1':item.live_status==102?'hours2':'hours3'">{{item.live_status==101?'直播中':item.live_status==102?'未开始':'回放'}}</view>
				</view>
			</view>
		</view>
			<!-- <view v-for="i in data" :key='i' class="item" @click="tt(i.roomid)">
				{{i.name}}
			</view> -->
	</view>
</template>

<script>
	var LivePlayer = requirePlugin('live-player-plugin')
export default {
	data() {
		return {
			muted:false,
			vertical:'vertical',
			Token:'',
			data:[],
			time:'',
			Timer:null,
			width:'85',
			height:'30',
			fontSize:'12',
			color:'#36B94A',
			backgroundColor:'#ECF0F1',
			border:'15'
		};
	},
	destroyed() {
		clearInterval(this.Timer)
	},

	onLoad() {
		
		this.$request('/app/live/getLiveAccessToken','post',{
			access_token: JSON.parse(uni.getStorageSync('access_token'))
		}).then(res=>{
			this.Token=res.content.access_token
			console.log(this.Token)
			this.$request('/app/live/getLveList','post',{
				token:this.Token,
				start: 0,
				limit: 100
			}).then(res1=>{
				this.data=res1.content.room_info
				console.log(res1.content.room_info)
			})
		})
		this.Timer=setInterval(v=>{
			this.time=Math.round(new Date() / 1000);
		},1000)
		// let token = JSON.parse(uni.getStorageSync('access_token')).replace(/^\"|\"$/g,'')
		// let _this=this
		// uni.request({
		//     url: 'https://api.weixin.qq.com/cgi-bin/token', //仅为示例，并非真实接口地址。
		//     data: {
		//         grant_type:'client_credential',
		// 		appid:'wxa51fb057e415c022',
		// 		secret:'1fd7e038a19d0999083b20eb1f9daa71'
		//     },
		// 	header: {
		// 	'content-type': 'application/x-www-form-urlencoded',
		// 	},
		// 	method:'GET',
		//     success: (res) => {
		// 		console.log(res)
		// 		_this.Token= res.data.access_token
		//         console.log(_this.Token,1);
		//         console.log(this.Token,2);
		// 		uni.request({
		// 		    url: 'https://api.weixin.qq.com/wxa/business/getliveinfo?access_token='+this.Token, //仅为示例，并非真实接口地址。
		// 		    data: {
		// 				"start": 0,
		// 				"limit": 100
		// 		    },
		// 			dataType:'raw',
		// 			header: {
		// 			'content-type': 'application/json',
		// 			},
		// 			method:'POST',
		// 		    success: (res1) => {
		// 				this.data=JSON.parse(res1.data).room_info
		// 				console.log(JSON.parse(res1.data).room_info)
		// 		        console.log(this.data,4);
		// 		    }
		// 		});
		//     }
		// });
		console.log(this.Token,3)

	},
	methods:{
		onSubscribe(e){
			console.log('房间号：', e.detail.room_id)
			    console.log('订阅用户openid', e.detail.openid)
			    console.log('是否订阅', e.detail.is_subscribe)
		},
		tt(e){
			console.log(1)
			wx.navigateTo({
			    url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${e}&custom_params=${1}`
			})
		},
		settime(){
			
				
		},
		Onstatechange(e){
			console.log('live-player code:', e.detail.code)
		},
		Onnetstatus(e){
			console.log('live-player info:',e.detail.info)
		},
		Onaudiovolumenotify(e){
			console.log('live-player muted:',e)
		}
	}
};
</script>

<style lang="less">
	.haibao{
		height: 100%;
		width: 100%;
		padding: 0 20rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		background: #F3F4F5;
		overflow-x: scroll;
	.option {
		background: #ffffff;
		width: 100%;
		padding-bottom: 10rpx;
		margin: 0 auto 20rpx;

		border-radius: 10px;
		overflow: hidden;

		.option-title {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.title-left {
				color: #777777;
				font-size: 24rpx;
				display: flex;
				align-items: center;

				.option-awater {
					width: 48rpx;
					height: 48rpx;
					border-radius: 99px;
					margin-right: 16rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.title-right {
				width: 170rpx;
				height: 60rpx;
				background: #ECF0F1;
				border-radius: 15px;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #36B94A;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.isCollection {
				position: absolute;
				top: 80rpx;
				right: 20rpx;
				height: auto;
				width: auto;
				padding: 20rpx;
				background: #ffffff;
				box-shadow: 0px 2rpx 10rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 6rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				// line-height: 80rpx;
			}
		}

		.option-img {
			width: 100%;
			height: 420rpx;
			overflow: hidden;
			position: relative;
			&>image {
				width: 120%;
				position: absolute;
				left: -80rpx;
				top: -220rpx;
			}
			.modal{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(0,0,0,0.5);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.time{
					font-size: 14px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
				.buttom{
					width: 248rpx;
					height: 80rpx;
					background: #36B94A;
					border-radius: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					text{
					font-size: 14px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;	
					}
					image{
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
			
		}

		.option-detail {
			padding: 20rpx;

			.detail-title {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 28rpx;
			}

			.detail-data {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #777777;
				font-size: 20rpx;

				.look {
					display: flex;
					align-items: center;

					.look-icons {
						display: flex;
						align-items: center;
						margin-right: 20rpx;

						.look-icon {
							margin-right: 8rpx;
						}
					}
				}
				.hours{
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					width: 96rpx;
					height: 48rpx;
					border-radius: 15px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.hours1{
					background: #36B94A;
				}
				.hours2{
					background: #E99800;
				}
				.hours3{
					background: #26A0FB;
				}
			}
		}
	}
		}
</style>
